<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 600px">
      <el-table-column
        prop="productId"
        label="商品编码"
        width="100">
      </el-table-column>
      <el-table-column
        prop="productTitle"
        width='350'
        label="商品名称">
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template scope='scope'>
          <el-button type="primary" size="small" @click='del(scope.row.productId)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {
    getGoodsListByIdAndTitle
  } from 'src/api/index.js'
  export default {
    props: ['productList'],
    data () {
      return {
        tableData: []
      }
    },
    watch: {
      'productList': 'fetchGoodsData'
    },
    methods: {
      fetchGoodsData () {
        if (this.productList.length > 0) {
          getGoodsListByIdAndTitle({
            'page': 1,
            'productIdList': this.productList,
            'size': 10000
          }).then((res) => {
            let result = res.data
            if (result.code === 100) {
              this.tableData = result.data.list
            }
          })
        } else {
          this.tableData = []
        }
      },
      del (productId) {
        this.$confirm('是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let resultArr = this.productList.filter((item) => item !== productId)
          this.$emit('updateProduct', resultArr)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {

        })
      }
    }
  }
</script>
<style>
  .btn-p{
    text-align: center;
  }
</style>
